<template>
  <div class="classroom">
    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="8">
        <el-input
              maxlength="50"
          clearable
          v-model="query.noticeName"
          placeholder="食安公告名称"
        ></el-input>
      </el-col>

      <el-col :span="6">
        <el-date-picker
          v-model="query.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          @change="pickerChage"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-select v-model="query.noticeState" clearable placeholder="状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="待发布" value="0"></el-option>
          <el-option label="已发布" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="findFoodSafetyClassList"
          icon="el-icon-search"
          >查询</el-button
        ></el-col
      >
      <el-col :span="2">
        <el-button type="success" icon="el-icon-plus" @click="addItem"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="noticeName" label="食安公告名称">
      </el-table-column>
      <el-table-column prop="creaeUnitName" label="创建单位名称">
      </el-table-column>
      <el-table-column prop="noticeState" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.noticeState == '待发布'" class="red">待发布</div>
          <div v-else class="green">已发布</div>
        </template>
      </el-table-column>
      <el-table-column prop="releaseDate" label="发布时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.releaseDate || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="visitVolume" label="访问量"> </el-table-column>
      <el-table-column prop="createTime" label="创建日期"> </el-table-column>
      <el-table-column prop="" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="view(scope.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.noticeState != '已发布'"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            @click="deleteById(scope.row)"
            size="mini"
            v-if="scope.row.noticeState != '已发布'"
            >删除</el-button
          >
          <el-button size="mini" @click="onView(scope.row)">手机预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <table-page :columns="columns" :tableData="tableData">
      <template slot="select">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="10">
            <el-input
              clearable
              v-model="query.safetyTitle"
              placeholder="食安标题"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="query.safetyCategory"
              clearable
              placeholder="食安分类"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in list"
                :key="index"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.safetyState" clearable placeholder="状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待发布" value="0"></el-option>
              <el-option label="已发布" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-checkbox v-model="query.isrecommendcheck">是否推荐</el-checkbox>
          </el-col>
          <el-col :span="3">
            <el-button
              type="primary"
              @click="findFoodSafetyClassList"
              icon="el-icon-search"
              >查询</el-button
            ></el-col
          >
          <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" @click="addItem"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </template>
      <template slot="safetyState" slot-scope="slotProps">
        <div v-if="slotProps.scope&&slotProps.scope.safetyState == '待发布'" class="red">
          待发布
        </div>
        <div v-else class="green">已发布</div>
      </template>
      <template slot="releaseDate" slot-scope="slotProps">
        <div>
          {{ slotProps.scope&&slotProps.scope.releaseDate || "--" }}
        </div>
      </template>

  <template slot="actions" slot-scope="slotProps">
        <div>
          {{ slotProps.scope}}
        </div>
      </template>
      <template slot="action" slot-scope="slotProps">
        <el-button type="info" size="mini">查看</el-button>
        <el-button type="primary" size="mini">编辑</el-button>
        <el-button type="danger" @click="deleteById(slotProps)" size="mini"
          >删除{{slotProps}}</el-button
        >
      </template>
    </table-page> -->
    <pagination
      :total="total"
      :page.sync="query.page"
      @pagination="findFoodSafetyClassListPage"
      v-show="total"
    />
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
    >
     <div class="center">
       <vue-qr :text="url" :margin="0"  colorLight="#fff"  :logoScale="0.3" :size="200"></vue-qr>
     </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
export default {
   components: {
        vueQr
    },
  props: {},
  data() {
    return {
      url:"1223",
      query: {
        creaeUnitId: "23342113",
        endDate: "",
        noticeName: "",
        noticeState: "",
        pageIndex: 1,
        pageSize: 10,
        startDate: "",
      },
      total: 0,
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogVisible:false,
    };
  },
  computed: {},
  created() {
    this.findFoodSafetyClassList();
  },
  mounted() {},
  methods: {
    findFoodSafetyClassListPage(e){
          this.query.pageIndex=e.page
              this.findFoodSafetyClassList();
    },  
    addItem() {
      this.$router.push("/foodSafety/notice/addNotice");
    },
    findFoodSafetyClassList() {
      this.$http
        .findFoodSafetyNoticeList(this.query)
        .then((res) => {
            this.tableData = res.data;
            this.total = res.totalCount;
        })
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .noticeDeleteById({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
                this.pageIndex = 1;
                this.findFoodSafetyClassList();
                this.$success(res.msg);
            })
        })
    },
    edit(e) {
      this.$router.push(`/foodSafety/notice/addNotice?id=${e.id}`);
    },
    view(e) {
      this.$router.push(`/foodSafety/notice/viewNotice?id=${e.id}`);
    },
    pagination(e) {
      console.log(e);
    },
    pickerChage(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    onView(e) {
      this.url=e.id
      this.dialogVisible=true
    },
    handleClose(){
      this.dialogVisible=false

    }
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
